<script>
import SvgIcon from "@/components/iconfont/SvgIcon.vue";
import request from "@/utils/request.js";

export default {
  components: {SvgIcon},
  data() {
    return {
      list: [{}],
      user: {},
    }
  },
  methods: {
    getData() {
      request.get("/article").then(res=>{
        this.list = res.data;
      })
    },
    handleClick(item) {
      if (this.user) {
        localStorage.setItem('articleId', item.id)
        this.$router.push('/article');
      }else{
        this.$router.push('/login');
      }
    },
    search(keyword) {
      request.get('/article/search/' + keyword).then(res=>{
        if (res.code === '0') {
          this.list = res.data;
          localStorage.removeItem('search')
        }else{
          this.$message.error(res.msg)
        }
      })
    },
  },
  created() {
    this.user = JSON.parse(localStorage.getItem('user'));
    if (localStorage.getItem('search')) {
      this.search(localStorage.getItem('search'))
    }else{
      this.getData();
    }
  }
}
</script>

<template>
  <div v-if="this.list.length!==0">
    <el-row v-for="item in list">
      <el-col :span="24">
        <div >
          <el-card shadow="never" style="height: 126px">
            <div style="font-size: large;cursor: pointer"  @click="handleClick(item)">
              <span><b>{{ item.title }}</b></span>
            </div>
            <div style="margin-top: 10px;cursor: pointer" @click="handleClick(item)">
              <p v-html="item.description?item.description:'简介'">
              </p>
            </div>
            <div style="margin-top: 10px;font-size: small">
              作者:<span style="color: #409EFF">{{ item.authorName }}</span>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
  <div v-else>
    <el-empty description="暂无数据" :image-size="100"></el-empty>
  </div>
</template>

<style scoped>

</style>